<template>
	<view class="device_page">
		<NavigationTitle title="检测设备" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<image class="back_icon" src="@/static/common/back.png" mode="widthFix" @tap="backSelf" />
			</template>
			<template slot="right_con">
				<uni-icons type="settings" size="30" @click="showDrawer()"></uni-icons>
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<view class="device_main"  v-if="isShow">
			<view style="color: #555; margin: 10rpx 0 5rpx;font-size: 24rpx;min-height:50rpx ;">{{deviceNewData.path||''}}</view>
			<text style="color: #555; font-size: 24rpx;">
				数据最新接入时间：{{deviceNewData.dateTime||''}}
			</text>
			<view class="dataItem">
				<text class="title">量测名称</text>
				<view class="value">{{(checkData.deviceName+'('+checkData.deviceId+')')||""}}</view>
			</view>
			<view class="dataItem">
				<text class="title">位置信息</text>
				<view class="value">纬度:{{checkData.latitude||""}}</view>
				<view class="value">经度:{{checkData.longitude||""}}</view>
			</view>
			<DataPage :newData="deviceNewData" :type="checkData.productTypeId||'0'"></DataPage>
			<view class="historyData">
				<!-- <text style="font-size: 36rpx;padding: 10rpx 0rpx;font-weight: 600;">设备历史信息</text> -->
				<uni-datetime-picker v-model="dataRange" type="datetimerange" rangeSeparator="至" @change="selectDate"  :clear-icon="false"/>
				<uni-segmented-control :current="controlCurrent|| 0" :values="tabItems" style-type="text"
					@clickItem="onClickTabItem" />
				<view class="content">
					<view v-if="controlCurrent == 0">
						<Table :tableData="tableData||[]" :loading="tableLoading" :type="dataType"></Table>
					</view>
					<view v-if="controlCurrent == 1">
						<uni-table ref="table" :loading="tableLoading" border stripe  emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="100" align="center">设备名称</uni-th>
								<uni-th width="100" align="center">告警内容</uni-th>
								<uni-th width="100" align="center">告警值</uni-th>
								<uni-th width="140" align="center">告警时间</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td align="center">{{ item.deviceName ||'无名称'}}</uni-td>
								<uni-td align="left">{{ item.alarm.alarmContent ||'无内容'}}</uni-td>
								<uni-td align="center">{{ item.alarm.alarmValue ||'无内容'}}</uni-td>
								<uni-td align="center">{{ item.alarm.alarmDateTime ||'无内容'}}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
							:total="total" @change="changePage" /></view>
				</view>
			</view>
		</view>
		<view v-else class="selectBox">请先点击右上角图标，选择检测设备。</view>
		<uni-drawer ref="showLeft" mode="left" :width="320">
			<view class="status-bar"></view>
			<view class="drawerLeft">
				<!-- 				<DaTreeVue2 ref="DaTreeRef" :data="deviceTree" labelField="title" valueField="id" defaultExpandAll
					:defaultCheckedKeys="defaultCheckedKeysValue" @change="handleTreeChange" /> -->
				<uni-forms ref="baseForm" :modelValue="searchValue" label-width='50' label-align='center'
					class="baseForm">
					<uni-forms-item label="省:">
						<uni-data-select v-model="value1" :localdata="data1" @change="(e)=>change(e,'0')" :clear='false'
							label='省:'></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="市:">
						<uni-data-select v-model="value2" :localdata="data2" @change="(e)=>change(e,'1')" :clear='false'
							:disabled="level<1"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="供应商:">
						<uni-data-select v-model="value3" :localdata="data3" @change="(e)=>change(e,'2')" :clear='false'
							:disabled="level<2"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="线路:">
						<uni-data-select v-model="value4" :localdata="data4" @change="(e)=>change(e,'3')" :clear='false'
							:disabled="level<3"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="线路类:">
						<uni-data-select v-model="value5" :localdata="data5" @change="(e)=>change(e,'4')" :clear='false'
							:disabled="level<4"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="设备大类:">
						<uni-data-select v-model="value6" :localdata="data6" @change="(e)=>change(e,'5')" :clear='false'
							:disabled="level<5"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="设备小类:">
						<uni-data-select v-model="value7" :localdata="data7" @change="(e)=>change(e,'6')" :clear='false'
							:disabled="level<6"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="设备名称:">
						<uni-data-select v-model="value8" :localdata="data8" @change="(e)=>change(e,'7')" :clear='false'
							:disabled="level<6"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="drawerConfirm" class="btn">查询</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
	import Table from '@/components/table/index.vue'
	import DataPage from './dataPage.vue'
	import {
		showToastMsg,
		showModalMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle,
			DaTreeVue2,
			Table,
			DataPage
		},
		computed: {
			...mapGetters(['project', 'projectId', 'authorList', 'productType'])
		},
		data() {
			return {
				searchValue: {},
				deviceTree: [],
				defaultCheckedKeysValue: [],

				tabItems: ['历史数据','报警数据'],
				controlCurrent: 0,
				dataType:0,
				tableData:[],
				pageCurrent:1,
				pageSize:10,
				total:0,
				tableLoading:false,
				isShow:false,

				value1: null,
				data1: [],
				value2: null,
				data2: [],
				value3: null,
				data3: [],
				value4: null,
				data4: [],
				value5: null,
				data5: [],
				value6: null,
				data6: [],
				value7: null,
				data7: [],
				value8: null,
				data8: [],
				level: 0,
				checkData: {},
				deviceNewData: {},
				dataRange:[],
			}
		},
		onShow() {
			this.getNowDate()
			this.getDeviceTree()
		},
		methods: {
			getNowDate(){
				// 创建当前时间的Date对象
				const now = new Date();
				// 创建往前推24小时的Date对象
				const twentyFourHoursAgo = new Date(now);
				twentyFourHoursAgo.setDate(twentyFourHoursAgo.getDate() - 1);
				
				// 输出当前时间和往前推24小时的时间
				this.dataRange.push(twentyFourHoursAgo.toLocaleString())
				this.dataRange.push(now.toLocaleString())
				console.log("当前时间:", now.toLocaleString()); // 格式化当前时间
				console.log("24小时前:", twentyFourHoursAgo.toLocaleString()); // 格式化24小时前的时间
				console.log(this.dataRange)
			},
			selectDate(e){ //选择时间范围
				console.log(e)
				this.resetPage()
				if(this.controlCurrent==0){
					this.getDeviceHistory(this.checkData)
				}else if(this.controlCurrent==1){
					this.getAlarmHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else return 
			},
			resetPage(){
				this.tableData=[]
				this.pageCurrent=1
				this.pageSize=10
				this.total=0
			},
			changePage(e){
				console.log(e.current)
				this.pageCurrent = e.current
				if(this.controlCurrent==0){
					this.getDeviceHistory(this.checkData)
				}else if(this.controlCurrent==1){
					this.getAlarmHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else return 
				
			},
			onClickTabItem(e) {
				if (this.controlCurrent !== e.currentIndex) {
					this.controlCurrent = e.currentIndex
				}
				this.resetPage()
				if(e.currentIndex==0){
					this.getDeviceHistory(this.checkData)
				}else if(e.currentIndex==1){
					this.getAlarmHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else return 
			},
			change(e, v) {
				let that = this
				// console.log(e,v)
				if (v == 0) {
					this.data2 = fun(this.data1)
					this.value2 = null
					this.value3 = null
					this.value4 = null
					this.value5 = null
					this.value6 = null
					this.value7 = null
					this.value8 = null
				} else if (v == 1) {
					this.data3 = fun(this.data2)
					this.value3 = null
					this.value4 = null
					this.value5 = null
					this.value6 = null
					this.value7 = null
					this.value8 = null
				} else if (v == 2) {
					this.data4 = fun(this.data3)
					this.value4 = null
					this.value5 = null
					this.value6 = null
					this.value7 = null
					this.value8 = null
				} else if (v == 3) {
					this.data5 = fun(this.data4)
					this.value5 = null
					this.value6 = null
					this.value7 = null
					this.value8 = null
				} else if (v == 4) {
					this.data6 = fun(this.data5)
					this.value6 = null
					this.value7 = null
					this.value8 = null
				} else if (v == 5) {
					this.data7 = fun(this.data6)
					this.value7 = null
					this.value8 = null
				} else if (v == 6) {
					let arr = []
					this.data7.map(i => {
						if (i.value == e) {
							i.devices.map(v => {
								v.value = v.id
								v.text = v.deviceName
								arr.push(v)
							})

						}
					})
					this.data8 = arr
					this.value8 = null
				} else return

				function fun(data) {
					let arr = []
					data.map(i => {
						if (i.value == e) {
							i.children.map(v => {
								v.value = v.id
								v.text = v.title
								arr.push(v)
							})

						}
					})
					that.level = Number(v) + 1
					return arr
				}

			},
			async getDeviceTree() {
				if (!this.projectId) this.backSelf()
				await this.$api.getDevicesTree({
					projectId: this.projectId,
					
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.deviceTree = res.data
						res.data.map(v => {
							v.value = v.id
							v.text = v.title
							this.data1.push(v)
						})
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getDeviceHistory(data){
				this.dataType = data.productTypeId
				console.log(data.productTypeId)
				if(data.productTypeId==0){
					this.getCirHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else if(data.productTypeId==11){
					this.getJointHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else if(data.productTypeId==8){
					this.getNailHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else if(data.productTypeId==10){
					this.getFaultLocaHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else if(data.productTypeId==6){
					this.getOutPhase({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else if(data.productTypeId==21){
					this.getStartStopHistory({pageCurrent:this.pageCurrent,pageSize:this.pageSize})
				}else return 
			},
			async getCirHistory(page){  //环流历史数据
				if(!this.checkData.deviceId) return 
				if(!page) return 
				await this.$api.getCirHistory({
					// deviceId: '01224140',
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getNailHistory(page){  //地钉历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getNailHistory({
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getAlarmHistory(page){  //告警历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getAlarmHistory({
					// deviceId:"49825",
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getFaultLocaHistory(page){  //故障定位历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getFaultLocaHistory({
					// deviceId: '22242001',
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getJointHistory(page){  //接头感知历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getJointHistory({
					// deviceId: '22243001',
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getOutPhase(page){  //外置局放历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getOutPhase({
					//deviceId："51200C5D",
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getStartStopHistory(page){  //启停装置历史数据
				if(!this.checkData.deviceId) return
				if(!page) return 
				await this.$api.getStartStopHistory({
					//deviceId："51200C5D",
					deviceId:this.checkData.deviceId,
					pageNum:page.pageCurrent,
					pageSize:page.pageSize,
					startTime:this.dataRange[0],
					endTime:this.dataRange[1],
				}).then(res => {
					if (res?.code == 200) {
						console.log(res)
						this.tableData = res.data.data
						this.total = res.data.totalNum
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			async getDeviceNewData(data) {
				await this.$api.getDeviceNewData({
					productSubclassId: data.productSubclassId,
					deviceId: data.deviceId
				}).then(res => {
					if (res?.code == 200) {
						console.log(res.data)
						this.deviceNewData = res.data
					}

				}).catch(err => {
					console.log(err)
				})
			},
			handleTreeChange(allSelectedKeys, currentItem) {
				console.log(allSelectedKeys, currentItem)
				// this.checkedKey = allSelectedKeys
			},
			showDrawer() {
				this.$refs['showLeft'].open()
			},
			// 关闭窗口
			closeDrawer() {
				this.$refs['showLeft'].close()
			},
			drawerConfirm() {
				// this.$refs.baseForm.validate().then(res=>{
				// 	console.log(res)
				// })
				if (!this.value8) return
				this.data8.map(v => {
					if (v.id == this.value8) {
						this.isShow = true
						this.checkData = v
						this.controlCurrent = 0
						this.resetPage()
						this.getDeviceNewData(v)
						this.getDeviceHistory(v)
						
					}
				})
				this.closeDrawer()
			},
			backSelf() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	view {
		box-sizing: border-box !important;
	}

	.device_page {
		position: relative;
		height: 100vh;
	}

	.user_search {
		display: flex;
		padding: $System__title_height 12rpx 0;

		.search {
			flex: 7;
		}

		/deep/.uni-stat__select {
			flex: 3;
		}
	}
	.selectBox{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 36rpx;
		text-align: center;
		color: #666;
	}

	.device_main {
		height: 90vh;
		padding: $System__title_height 20rpx 0;
		position: relative;

		.dataItem {
			margin: 10rpx 0;

			.title {
				font-size: 36rpx;

			}
			.value {
				color: #666;
				padding: 10rpx 10rpx 0;
			}
		}
		.historyData{
			padding:0 0 10rpx;
			.content{
				
			}
		}
	}

	.back_icon {
		width: 37rpx;
	}

	.drawerLeft {
		padding: 20rpx;

		.baseForm {
			padding: 20rpx 0;
			min-height: 50vh;
		}

		.popupBtn {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.btn {
				width: 45%;
			}
		}
	}

	.userAdd {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
	}
</style>